import React from 'react';
import { connect } from 'dva';
import { Table, Row, Col, Form, Input, Button, Modal, DatePicker, Popconfirm } from 'antd';
const R = require('ramda');
const dateFormat = 'YYYY-MM-DD';
const { RangePicker } = DatePicker;
import Constants from '../../../utils/Constants';
import RightConstants from '../../../utils/RightConstants';
import RightBox from "../../../components/commons/RightBox";
import BizParams from '../../../components/commons/BizParams';
import SubBankAccount from '../../../components/customer/components/SubBankAccount';

const FormItem = Form.Item;
export default connect(({ customerBank }) => ({ customerBank }))(
    Form.create()(class customerBank extends React.Component {
        constructor(props) {
            super(props);
            this.state = {
                open: false,
            }
        }

        componentDidMount() {
            this.props.dispatch({
                type: 'customerBank/queryBankCustomers',
                payload: { page: Constants.DEFAULTPAGE }
            });
        }

        handleAdd = (id) => {
            this.props.dispatch({
                type: 'customerBank/getBankSubAccount',
                payload: { id }
            });
            this.subBankAccount.handleOpen()
        }

        applyConversion = (record) => {
            this.props.dispatch({
                type: 'customerBank/applyConversion',
                payload: { id: record.id }
            });
        }

        handleSearch = () => {
            let values = this.props.form.getFieldsValue();
            let newPage = this.props.customerBank.page;
            newPage.page = 1;
            let time = values.time;
            this.props.dispatch({
                type: 'customerBank/queryBankCustomers',
                payload: {
                    customerNo: values.customerNo,
                    cstName: values.cstName,
                    bankId: values.bankId,
                    page: newPage,
                    beginTime: R.isNil(time) || R.isEmpty(time) ? null : time[0].format(dateFormat),
                    endTime: R.isNil(time) || R.isEmpty(time) ? null : time[1].format(dateFormat)
                }
            });
        };

        columns = [
            { title: '客户编码', dataIndex: 'customerNo', key: 'customerNo' },
            { title: '客户名称', dataIndex: 'companyName', key: 'companyName' },
            { title: '收款名称', dataIndex: 'cstNameEn', key: 'cstNameEn' },
            { title: '银行名称', dataIndex: 'bankName', key: 'bankName' },
            { title: '交易附言', dataIndex: 'addMsg', key: 'addMsg' },
            { title: '清分子账号', dataIndex: 'bankSubAccount', key: 'bankSubAccount' },
            { title: '币种', dataIndex: 'currenyName', key: 'currenyName' },
            { title: '创建人', dataIndex: 'creatorName', key: 'creatorName' },
            { title: '创建时间', dataIndex: 'createTime', key: 'createTime' },
            {
                title: '操作', render: (text, record, index) => {
                    return <span>
                        <RightBox resource={RightConstants.CUSTOMER.HOST_TO_HOST_APPLY_CONVERSION} split={true}>
                            <Popconfirm onConfirm={this.applyConversion.bind(this, record)} okText="是" cancelText="否"
                                placement="leftTop" title={'是否向银行申请结汇?'}>
                                <a href="#">结汇</a>
                            </Popconfirm>
                        </RightBox>
                        <RightBox resource={RightConstants.CUSTOMER.HOST_TO_HOST_SUBACCOUNT_UPDATE} >
                            <a href="#" onClick={this.handleAdd.bind(this, record.id)}>修改</a>
                        </RightBox>
                    </span>
                }
            }
        ];

        render() {
            let formItemLayout = { labelCol: { span: 6 }, wrapperCol: { span: 18 } };
            const { getFieldDecorator } = this.props.form;
            let values = this.props.form.getFieldsValue();
            let time = values.time;
            let pagination = {
                showTotal: total => `共 ${total} 条数据`,
                pageSize: this.props.customerBank.page.size,
                total: this.props.customerBank.page.totalRow,
                showSizeChanger: true,
                current: this.props.customerBank.page.page,
                onShowSizeChange: (current, size) => {
                    let newPage = this.props.customerBank.page;
                    newPage.size = size;
                    newPage.page = 1;
                    this.props.dispatch({
                        type: 'customerBank/queryBankCustomers',
                        payload: {
                            customerNo: values.customerNo,
                            cstName: values.cstName,
                            bankId: values.bankId,
                            page: newPage,
                            beginTime: R.isNil(time) || R.isEmpty(time) ? null : time[0].format(dateFormat),
                            endTime: R.isNil(time) || R.isEmpty(time) ? null : time[1].format(dateFormat),
                        }
                    });
                },
                onChange: (pageNumber, pageSize) => {
                    let newPage = this.props.customerBank.page;
                    newPage.page = pageNumber;
                    this.props.dispatch({
                        type: 'customerBank/queryBankCustomers',
                        payload: {
                            customerNo: values.customerNo,
                            cstName: values.cstName,
                            bankId: values.bankId,
                            page: newPage,
                            beginTime: R.isNil(time) || R.isEmpty(time) ? null : time[0].format(dateFormat),
                            endTime: R.isNil(time) || R.isEmpty(time) ? null : time[1].format(dateFormat),
                        }
                    });
                }
            }
            return (
                <div>
                    <Row>
                        <Col span={7}><FormItem {...formItemLayout} label={'客户代码'}>{getFieldDecorator('customerNo')(<Input />)}</FormItem></Col>
                        <Col span={7}><FormItem {...formItemLayout} label={'客户名称'}>{getFieldDecorator('cstName')(<Input />)}</FormItem></Col>
                    </Row>
                    <Row>
                        <Col span={7}><FormItem {...formItemLayout} label={'关联银行'}>
                            {getFieldDecorator('bankId')(
                                <BizParams sprCode={"bankCode"} style={{ width: '100%' }} all={true} />
                            )}
                        </FormItem></Col>
                        <Col span={7}>
                            <FormItem {...formItemLayout} label={'创建时间'}>
                                {getFieldDecorator('time', {})(
                                    <RangePicker
                                        style={{ width: '100%' }}
                                        showTime={{ format: 'YYYY-MM-DD' }}
                                        format="YYYY-MM-DD"
                                        placeholder={['开始时间', '结束时间']}
                                    />
                                )}
                            </FormItem>
                        </Col>
                        <Col span={7} style={{ float: 'right' }}>
                            <Button type="primary" icon="search" style={{ marginRight: 5 }} onClick={this.handleSearch.bind(this)}>查询</Button>
                            <RightBox resource={RightConstants.CUSTOMER.HOST_TO_HOST_SUBACCOUNT_ADD}><Button type="primary" icon="plus" style={{ marginRight: 5 }} onClick={this.handleAdd.bind(this, null)}>创建银企直连子账户</Button></RightBox>
                        </Col>
                    </Row>
                    <Table rowKey="id" dataSource={this.props.customerBank.list} columns={this.columns} bordered={true} size={'middle'} pagination={pagination} />
                    <SubBankAccount wrappedComponentRef={(inst) => this.subBankAccount = inst} dispatch={this.props.dispatch} refreshList={this.handleSearch} dataSource={this.props.customerBank.dataSource} />
                </div>
            )
        }
    })
)
